<template>
  <div class="block-box">
    <div :class="['type ml-4', type]">
      <Icon :icon="activeType.icon" :size="40" :color="activeType.color" />
      <h4 class="mt-4" :style="{ color: activeType.color }">{{ activeType.name }}</h4>
    </div>
    <div class="right-content ml-1">
      <h4 class="chart-title pr-4">
        <span class="last">上月 {{ data.lastTotal || '-' }} {{ activeType.unit }}</span>
        <span class="current">本月 {{ data.total }} {{ activeType.unit }}</span>
        <span class="tip">环比上月 {{ rated }}</span>
      </h4>
      <div ref="chartRef" class="chart-box" :style="{ height, width }"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Icon from '@/components/Icon/Icon.vue';
import { computed, watch, toRefs, Ref, ref } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';

const props = defineProps({
  width: {
    type: String as PropType<string>,
    default: '100%',
  },
  height: {
    type: String as PropType<string>,
    default: '100%',
  },
  type: {
    type: String,
    default: 'electric',
  },
  typeName: {
    type: String,
    default: '电%',
  },
  data: {
    type: Object,
    default: () => ({
      lastTotal: 0,
      total: 0,
      changeRate: '-'
    })
  }
});
const { data } = toRefs(props);
const chartRef = ref<HTMLDivElement | null>(null);

const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);


const typeObj = {
  electricity: {
    icon: 'cryptocurrency:elec',
    color: '#008bd5',
    name: '电',
    unit: 'KWH'
  },
  gas: {
    icon: 'mdi:gas',
    color: '#d4066f',
    name: '燃气',
    unit: 'm³'
  },
  water: {
    icon: 'ion:water-outline',
    color: '#00fe28',
    name: '水',
    unit: 'm³'
  },
}

watch(data, (val) => {
  setData(val)
}, { deep: true });

const setData = (newData) => {
  let source = [['', 'lastMonth', 'curMonth']]
  const { curMonth, lastMonth } = newData
  const dataSet = curMonth.map(item => {
    let lastMonthValue
    try {
      lastMonthValue = lastMonth.filter(lItem => lItem.classifyName === item.classifyName)[0].value
    } catch (e) {
      lastMonthValue = 0
    }
    return [item.classifyName, lastMonthValue, item.value]
  })
  source = source.concat(dataSet)
  const commonOptions = {
    label: {
      color: '#fff',
      show: false
    },
    labelLine: {
      length: 3,
      length2: 3,
      show: false
    },
    // emphasis: {
    //   label: {
    //     show: true,
    //     fontWeight: 'bold'
    //   }
    // },
  }
  setOptions({
    legend: {
      width: '10%',
      right: 0,
      type: 'scroll',
      orient: 'vertical',
      align: 'right',
      itemWidth: 10,
      textStyle: {
        fontSize: 12,
        color: '#fff'
      }
    },
    tooltip: {},

    dataset: {
      source
    },

    series: [
      {
        type: 'pie',
        radius: '45%',
        center: ['22.5%', '50%'],
        ...commonOptions
        // No encode specified, by default, it is 'lastMonth'.
      },
      {
        type: 'pie',
        radius: '45%',
        center: ['67.5%', '50%'],
        ...commonOptions,

        encode: {
          itemName: '',
          value: 'curMonth'
        }
      }
    ]
  })
}


const activeType = computed(() => {
  return typeObj[props.type]
})

const rated = computed(() => {
  return isNaN(props.data.changeRate) ? '-' : props.data.changeRate * 100 + '%'
})

defineExpose({
  setData
})
</script>

<style lang="scss" scoped>
.block-box {
  display: flex;

  .type {
    margin-top: -15px;

    .anticon {
      font-size: 40px;
    }

    h4 {
      font-size: 18px;
    }
  }

  .right-content {
    display: flex;
    flex: 1;
    flex-direction: column;

    .chart-title {
      display: flex;
      justify-content: space-between;
      color: #a9831e;
      font-size: 14px;

      .tip {
        color: #fff;
        font-size: 12px;
      }
    }

    .chart-box {
      flex: 1;
      margin-left: -20px;
    }
  }
}
</style>
